<template> 
                 <div class="g-bg1" :style="page_flag">
                       <div class="g-wrap">
                            <div class="u-title clearfix">
                                <h3>
                                     <span>{{cat}}</span>
                                     <a href="javascript:;" class="menu" @mousedown="option_flag">
                                        <i class="s-f">选择分类
                                            <em class="u-icn"></em>
                                        </i>
                                     </a>
                                </h3>
                                <div class="u-btn">
                                       <a href="javascript:;" class="al">热门</a>
                                </div> 
                            </div>
                             <div class="n-slt" v-show="O_flag">
                                    <div class="hd">
                                        <i class="icn"></i>
                                    </div>
                                    <div class="bd">
                                        <h3>
                                           
                                            <router-link :to="{
                                                path:'/discover/playlist',
                                                query:{
                                                    cat:'全部'
                                                }
                                            }" class="u-btn-g"><em>全部风格</em></router-link>
                                        </h3>
                                        <dl class="clearfix">
                                            <dt>
                                                <i class="category1"></i>语种
                                            </dt>
                                              <dd > 
                                               
                                                   
                                              
                                             
                                                 <router-link :to="{
                                                     path:'/discover/playlist',
                                                     query:{
                                                         cat:el.name,
                                                    

                                                     }
                                                     }" v-for="(el,index) in languages" :key="index">{{el.name}}<span class="line">|</span></router-link>
                                                    
                                               
                                                  </dd> 
                                        </dl> 

                                        <dl class="clearfix">
                                            <dt>
                                                <i class="category2"></i>风格
                                            </dt>
                                            <dd>
                                               
                                                <router-link :to="{
                                                    path:'/discover/playlist',
                                                    query:{
                                                        cat:el.name
                                                    }
                                                    }" v-for="(el,index) in style" :key="index">  {{el.name}}<span class="line">|</span></router-link>
                                            </dd>
                                        </dl>
                                           <dl class="clearfix">
                                            <dt>
                                                <i class="category3"></i>场景
                                            </dt>
                                            <dd>
                                             
                                                <router-link :to="{
                                                    path:'/discover/playlist',
                                                    query:{
                                                        cat:el.name
                                                    }
                                                }" v-for="(el,index) in scene" :key="index">  {{el.name}}<span class="line">|</span></router-link>
                                            </dd>
                                        </dl>
                                           <dl class="clearfix">
                                            <dt>
                                                <i class="category4"></i>情感
                                            </dt>
                                            <dd>
                                              
                                                       <router-link :to="{
                                                    path:'/discover/playlist',
                                                    query:{
                                                        cat:el.name
                                                    }
                                                }" v-for="(el,index) in emotio" :key="index">  {{el.name}}<span class="line">|</span></router-link>
                                            </dd>
                                        </dl>
                                           <dl class="clearfix">
                                            <dt>
                                                <i class="category5"></i>主题
                                            </dt>
                                            <dd class="last">
                                           
                                                 <router-link :to="{
                                                    path:'/discover/playlist',
                                                    query:{
                                                        cat:el.name
                                                    }
                                                }" v-for="(el,index) in theme" :key="index">  {{el.name}}<span class="line">|</span></router-link>
                                            </dd>
                                        </dl>
                                              
                                                 
                                                
                                           
                                            
                                        
                                    </div>
                                    <div class="ft">

                                    </div>
                             </div>
                            <ul class="m-cvrlst clearfix">
                                     <li v-for="el in songSheet.playlists" :key="el.id">
                                         <div class="u-cover">
                                             <img :src="el.coverImgUrl + '?param=140y140'">
                                      
                                             <router-link :to="{
                                                 path:'/playlist',
                                                 query:{
                                                     id:el.id
                                                 }
                                             }" class="msk" :title="el.name"></router-link>
                                             <div class="bottom">
                                                 <a href="javscirpt:;" title='播放' class="play" @mousedown="play_songsheet(el.id)"></a>
                                                 <span class="icon"></span>
                                                 <span class="nb">{{el.playCount}}</span>
                                             </div>
                                         </div>
                                         <p class="dec">
  
                                             

                                              <router-link :to="{
                                                 path:'/playlist',
                                                 query:{
                                                     id:el.id
                                                 }
                                             }" class="tit overtext" :title="el.name">{{el.name}}</router-link>

                                         </p>
                                         <p>
                                             <span class="s-fc4">by </span>
                                             <!-- <a href="javascript:;" ></a> -->
                                             <router-link :to="{
                                                 path:'/user/home',
                                                 query:{
                                                     id:el.userId
                                                 }
                                             }" :title="el.creator.nickname">{{el.creator.nickname}}</router-link>
                                         </p>
                                     </li>
                            </ul>
                            <SongSheetPageNumber :page_stype='path_num' :total='songSheet.total'/>
 
            </div>
                 </div>
          
</template>

<script>
import axios from 'axios'
import {play} from '../mixin.js'
import SongSheetPageNumber from '../components/SongSheetPageNumber.vue'
export default {
        name:'SongSheetPage',
        data(){
            return {
                  playlist:'',
                  type_data:'',
                  languages:[],
                  style:[],
                  scene:[],
                  emotio:[],
                  theme:[],
                  O_flag:false,
                  songSheet:'',
                  cat:'',
                  page_flag:{
                      visibility:'hidden'
                  },
                  path_num:1
                 

            }
        },
        methods: {
            option_flag(){
                this.O_flag = !this.O_flag
            },
          
          
        },
        
        watch:{
           '$route':{
               immediate:true,
               handler(){

                 axios.get('http://localhost:8080/api/top/playlist' + '?' + Date.now(),{
                  params:{
                      cat:this.$route.query.cat,
                      limit:this.$route.query.limit?this.$route.query.limit:'35',
                      offset:this.$route.query.offset,
                  }
              }).then( (response) => {
                   
                 if (this.$route.query.offset) {
                      
                      this.path_num = this.$route.query.offset / 35 + 1
                      
                      
                 }else {
                     this.path_num = 1;
                 }
                
               this.page_flag.visibility = 'hidden'
            //          this.$nextTick(() => {
            //                 this.O_flag = false;
            //          this.songSheet = response.data;
          
            // this.cat = response.data.cat
            //  this.page_flag.visibility = 'visible'
            //          })
                 
                  setTimeout( () => {
                       this.O_flag = false;
                     this.songSheet = response.data;
          
            this.cat = response.data.cat
             this.page_flag.visibility = 'visible'
                  },10)
          
            
            })
           
               }
           
            
           }
        }, 
     
        mounted(){
            //         axios.get('http://localhost:8080/api/top/playlist' + '?' + Date.now(),{
            //       params:{
            //           cat:this.$route.query.cat,
            //           limit:this.$route.query.limit?this.$route.query.limit:'35',
            //           offset:this.$route.query.offset,
            //       }
            //   }).then( (response) => {
            //      if (this.$route.query.offset) {
                      
            //           this.path_num = this.$route.query.offset / 35 + 1
            //       }else {     
                      
                
            //          this.path_num = 1;
            //      }
          
            // this.songSheet = response.data;
          
            // this.cat = response.data.cat
           
               
            // })


                axios.get('http://localhost:8080/api/playlist/catlist').then( (response) => {
                   
                  
              
                 response.data.sub.forEach(element => {
                        switch (element.category) {
                            case 0:
                             this.languages.push(element)  
                                break;
                            case 1:
                               this.style.push(element)
                                break;
                            case 2:
                              this.scene.push(element)  
                                break;
                            case 3:
                                this.emotio.push(element)
                                break;
                            case 4:
                                this.theme.push(element)
                                break;        
                            default:
                                break;
                        }
                 });
                    
                    
              })
               
           
            this.$bus.$on('pageNumber', (el) => {
               
                
                     
                     this.$router.push({
                     path:'/discover/playlist',
                     query:{
                         cat:this.$route.query.cat?this.$route.query.cat:'全部',
                         limit:'35',
                         offset:(el - 1) * 35,
                     }
                 })
              
                
            })
        },
        components:{
            SongSheetPageNumber
        },
  
        
              
        // },
       mixins:[play] 
   
}
</script>

<style lang="less" scoped>
     .g-wrap {
         position: relative;
         padding: 40px;
     }
     .g-bg1 {
         width: 980px;
         min-height: 700px;
         margin: 0 auto;
         background-color: #fff;
         border: 1px solid #d3d3d3;
         border-width: 0 1px;
     }
     .u-title {
         height: 40px;
         border-bottom: 2px solid #c20c20;
         h3 {
             font-size: 24px;
             font-weight: normal;
             text-align: left;
             float: left;
         }
     }
     .menu {
         display: inline-block;
         margin: 2px 0 0 12px;
         color: #333;
         background: url(../images/button2.png) no-repeat right -100px;
         padding: 0 5px 0 0;
         white-space: nowrap;
         height: 31px;
         line-height: 31px;
         vertical-align: top;
         overflow: hidden;
         &:hover {
            background: url(../images/button2.png) no-repeat right -182px;
         }
     }
     .u-icn {
         margin-left:2px;
         width: 8px;
         height: 5px;
         display: inline-block;
         background: url(../images/icon.png) no-repeat -70px -543px;
         overflow: hidden;
         vertical-align: middle;
         text-align: left;
     }
     .s-f {
         font-size: 12px;
         background: url(../images/button2.png) no-repeat 0 -59px;
         display: inline-block;
         height: 31px;
         line-height: 31px;
         vertical-align: top;
         text-align: center;
         padding: 0 10px 0 15px;
         color: #0c73c2;
         &:hover {
              background: url(../images/button2.png) no-repeat 0 -141px;
         }
     }
     .u-btn {
         float: right;
         height: 29px;
         border-radius: 3px;
         background: url(../images/button.png) no-repeat 0 0;
     }
     .al {
         float: left;
         width: 46px;
         height: 29px;
         line-height: 29px;
         text-align: center;
         color: #fff;
     }
     .m-cvrlst {
         margin: 30px 0 0 -50px;
         li {
             float: left;
             width: 140px;
             height: 188px;
             overflow: hidden;
             padding: 0 0 30px 50px;
             line-height: 1.4px;
             .dec {
                 
                 
                 padding: 9.5px 0 1px;
                  text-align: left;
                  height: 20px;
                
             }
             p {
                 width: 100%;
                 text-align: left;
                 line-height: 20px;
             }
             .tit {
                 display: block;
                 line-height: 20px;
                 height: 20px;
                 max-width: 100%;
                font-size: 14px;
                 color: #000;
                
                
             }
             
         }
         .msk {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             background: url(../images/coverall.png) no-repeat 0 0 ;
         }
     }
     .u-cover {
         position: relative;
         width: 140px;
         height: 140px;
         img {
             display: block;
             width: 100%;
             height: 100%;
         }
         .bottom {
             position: absolute;
             bottom: 0;
             left: 0;
             width: 100%;
             height: 27px;
             background: url(../images/coverall.png) no-repeat 0 -537px;
             color: #ccc;
         }
         .play {
             position: absolute;
             right: 10px;
             bottom: 5px;
             width: 16px;
             height: 17px;
             background: url(../images/iconall.png) no-repeat 0 0;
         }
         .icon {
             float: left;
             width: 14px;
             height: 11px;
             margin: 9px 5px 9px 10px;
             background: url(../images/iconall.png) no-repeat 0 -24px;
         }
         .nb {
             float: left;
             margin: 14.5px 0 0 0;
             color: #ccc;

         }
     }
     .n-slt {
         position: absolute;
         top: 75px;
         z-index: 5;
         width: 720px;
         left: 0;
         .hd {
             height: 32px;
             background: url(../images/sltlyr.png) no-repeat;
         }
         .icn {
             position: absolute;
             top: 2px;
             left: 132px;
             width: 24px;
             height: 11px;
             background: url(../images/iconall.png) no-repeat -48px 0;
         }
         .bd {
             width: 700px;
             padding: 0 10px;
             background: url(../images/sltlyr.png) repeat-y -720px 0 ;
         }
         h3 {
             height: 37px;
             padding-left:26px;
             border-bottom: 1px solid #e6e6e6;
             font-weight: normal;
             font-size:12px ;
             text-align: left;
         }
         dt {
             float: left;
             width: 70px;
             margin: 0 -100px 0 26px;
             padding-top:15px;
             border-right:1px solid #e6e6e6;
             font-weight: bold;
             text-align: left;
         }
         dd {
             margin-left: 96px;
             padding: 16px 15px 0 15px;
             border-left: 1px solid #e6e6e6;
             line-height: 24px;
             text-align: left;
            white-space: normal;
            word-wrap: break-word;
            word-break: break-word;
           
            a {
                white-space: nowrap;
            }
         }
         .ft {
             height: 20px;
             background: url(../images/sltlyr.png) no-repeat -1440px -12px;
         }
         .last {
         
         margin-left: 96px;
         padding: 16px 15px 25px;
         border-left: 1px solid #e6e6e6;
         line-height: 24px;
     }
     }
     .u-btn-g {
         display: inline-block;
         width: 75px;
         height: 26px;
         text-align: center;
         line-height: 26px;
         background: url(../images/button.png) no-repeat 0 -64px;
         color: #333;
        
     }
     .category1 {
         display: inline-block;
         margin: 0 8px 4px 0;
         width: 23px;
         height: 23px;
         background: url(../images/icon.png) no-repeat -20px -735px;
         vertical-align: middle;
     }
     .category2 {
         display: inline-block;
         margin: 0 8px 4px 0 ;
         width: 24px;
         height: 24px;
         background: url(../images/icon.png) no-repeat 0 -60px;
         vertical-align: middle;
     }
     .category3 {
          display: inline-block;
         margin: 0 8px 4px 0 ;
         width: 24px;
         height: 24px;
         background: url(../images/icon.png) no-repeat 0 -88px;
         vertical-align: middle;
     }
     .category4 {
         display: inline-block;
         margin: 0 8px 4px 0 ;
         width: 24px;
         height: 24px;
         background: url(../images/icon.png) no-repeat 0 -117px;
         vertical-align: middle;
     }
     .category5 {
         display: inline-block;
         margin: 0 8px 4px 0 ;
         width: 24px;
         height: 24px;
         background: url(../images/icon.png) no-repeat 0 -141px;
         vertical-align: middle;
     }
     .s-fc1 {
         color: #333;
     }
     .line {
         margin: 0 8px 0 10px;
         color: #d8d8d8;
     }
     
</style>